<template>
    <div class="name-wrapper">
      <v-header page="name"></v-header>
      <div class="banner-wrapper">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="banner-img" src="./banner02.png" width="100%" data-path="activity"/>
            </div>
            <div class="swiper-slide">
              <img class="banner-img" src="./banner01.png" width="100%" data-path="null"/>
            </div>
          </div>
          <!-- Add Pagination  -->
          <div class="swiper-pagination" ref="paginations"></div>
        </div>
      </div>
      <div class="main-wrapper">
        <div class="name-lucky-wrapper">
          <div class="name-lucky-title"></div>
          <div class="name-lucky-desc tj">姓名本质上有物质和超物质属性，蕴含阴阳、五行之规律，蕴藏着人的精气神，受宇宙万物运行法则的影响。天地运行，四季更替，导致自然界的风、雨、雷、电、声、引力和其他生命产生的磁波对个体姓名发生感应力，深刻影响着人生的吉凶祸福遭遇。姓名对人的生命有着重要的影响，但却常常被人们忽略。姓名气运在一命、二运、三风水中属于“运”的范畴，有其生成原理，感应原理，循环原理，暗藏着天地自然之玄机，同时是一门规律统计的大数据，经过不同时间、不同地域、不同人的大量统计分析，挖掘出姓名对人的性格、情绪、意志、健康、婚姻、家庭、子女、事业、财富的影响规律。姓名气运也是一种推断人生遭遇的重要手段，是改变人生遭遇的源头与关键，是知运术和造运术，正确运用姓名气运，可提前预知和改造人生必然遭遇，积极主动应对不利局面，使人生更加顺畅，更有价值。</div>
        </div>
        <div class="set-and-rename-wrapper">
          <div class="set-name inline" @click="hoverGoPath('clickSetName','bename')">
            <img src="./set-name.png" alt="" width="100%" v-show="!clickSetName">
            <img src="./set-name-active.png" alt="" width="100%" v-show="clickSetName">
          </div>
          <div class="rename inline" @click="hoverGoPath('clickRename','rename')">
            <img src="./rename.png" alt="" width="100%" v-show="!clickRename">
            <img src="./rename-active.png" alt="" width="100%" v-show="clickRename">
          </div>
        </div>
        <div class="free-tools-wrapper">
          <div class="free-tools-title tc">免费工具</div>
          <div class="free-tools">
            <div class="wg inline" @click="hoverGoPath('clickWg','wg')">
              <img src="./wg.png" alt="" width="100%" v-show="!clickWg">
              <img src="./wg-active.png" alt="" width="100%" v-show="clickWg">
            </div>
            <div class="kx inline" @click="hoverGoPath('clickKx','kx')">
              <img src="./kx.png" alt="" width="100%" v-show="!clickKx">
              <img src="./kx-active.png" alt="" width="100%" v-show="clickKx">
            </div>
            <div class="sl inline" @click="hoverGoPath('clickSl','sl')">
              <img src="./sl.png" alt="" width="100%" v-show="!clickSl">
              <img src="./sl-active.png" alt="" width="100%" v-show="clickSl">
            </div>
          </div>
        </div>
      </div>
      <v-footer></v-footer>
    </div>
</template>

<script>
    import Header from '@/components/header/Header'
    import Footer from '@/components/footer/Footer'
    import Swiper from "swiper"
    import "swiper/dist/css/swiper.min.css"

    export default {
        name: "Name",
        data() {
            return {
              clickSetName:false,
              clickRename:false,
              clickWg:false,
              clickKx:false,
              clickSl:false,
            }
        },
        components:{
          "v-header":Header,
          "v-footer":Footer
        },
        methods: {
          initSwiper(){
            let _this = this;
            let mySwiper = new Swiper('.swiper-container', {
              loop: true,
              pagination: ".swiper-pagination",
              autoplay: 3000,
              autoplayDisableOnInteraction: false,
              onTap: function(swiper, e) {
                if(e.target.dataset.path === "activity"){
                  _this.goPath(e.target.dataset.path);
                }
              }
            })
          },
          goPath(path){
            if(sessionStorage.getItem("loginFlag") === "yes" && sessionStorage.getItem("userId")){
              this.$router.push({path:path});
            }else{
              this.$router.push({name:"login",params:{to:"activity"}});
            }
          },
          hoverGoPath(bar,path){
            this._data[bar] = true;
            setTimeout(() => {
              if(path === "bename" || path === "rename"){
                if(sessionStorage.getItem("loginFlag") === "yes" && sessionStorage.getItem("userId")){
                  this.$router.push({path:path});
                }else{
                  this.$router.push({name:"login",params:{to:path}});
                }
              }else{
                this.$router.push({path:path});
              }
            },200);
          }
        },
        mounted(){
          this.initSwiper();
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .name-wrapper
    .main-wrapper
      padding 30px
      .name-lucky-wrapper
        width 670px
        margin 0 auto
        padding 33px 0 30px 0
        box-shadow: 0px 0px 9px 3px rgba(141,141,141,0.2)
        .name-lucky-title
          width 203px
          height 29px
          margin 0 auto
          background url("./name-lucky-title.png") no-repeat center center
          background-size cover
        .name-lucky-desc
          width 600px
          margin 15px auto 0
          font-size 20px
          line-height 32px
          color #828282
      .set-and-rename-wrapper
        margin-top 35px
        font-size 0
        .set-name
          width 330px
          height 240px
          margin-right 30px
        .rename
          width 330px
          height 240px
      .free-tools-wrapper
        .free-tools-title
          font-size 24px
          margin 26px 0 14px 0
        .free-tools
          font-size 0
          div
            width 210px
            height 241px
            margin-right 30px
            &:last-child
              margin-right 0
</style>
